import React, { Component } from 'react';
import styles from './index.less';
import { connect } from 'dva';
import { Button,Checkbox,Toast } from 'antd-mobile';

const AgreeItem = Checkbox.AgreeItem;
@connect(({ login }) => ({ ...login }))
class Login extends Component {
  state = {
    agree: false
  };
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'login/getImgCodeEff'
    });
  }
  onGetPhoneCode = () => {
    const { dispatch } = this.props;
    let PhoneNumbers = this.phoneInput.value;
    let imgCode = this.imgCodeInput.value;
    console.log('​Login -> onGetPhoneCode -> imgCode', imgCode);
    dispatch({
      type: 'login/getPhoneCodeEff',
      PhoneNumbers,
      imgCode
    });
  };
  onLogin = () => {
    const { dispatch } = this.props;
    let signUpCode = this.phoneCodeInput.value;
    let PhoneNumbers = this.phoneInput.value;
    dispatch({
      type: 'login/bindPhoneEff',
      signUpCode,
      PhoneNumbers
    });
  }
  render() {
    const { imgCodeSrc, disableGetPhoneCode, countTime } = this.props;
    return (
      <div className={styles.box}>
        <div className={styles.imgbox}>
          <img src={require('src/assets/cattle.svg')} alt="" />
        </div>
        <div className={styles.text}>
          <p>登录/注册</p>
          <div className={styles.span_i_one + ' ' + styles.span_i} />
          <input
            type="text"
            placeholder="请输入手机号码"
            ref={input => (this.phoneInput = input)}
          />
          <div className={styles.imgCodeContainer}>
            <div className={styles.span_i_two + ' ' + styles.span_i} />
            <input
              type="text"
              placeholder="请输入图形验证码"
              ref={input => (this.imgCodeInput = input)}
            />
            <div
              className={styles.imgCode}
              dangerouslySetInnerHTML={{ __html: imgCodeSrc }}
              onClick={() =>
                this.props.dispatch({
                  type: 'login/getImgCodeEff'
                })
              }
            />
          </div>
          <div className={styles.yangzhe}>
            <input
              type="text"
              placeholder="请输入手机验证码"
              ref={input => (this.phoneCodeInput = input)}
            />
            <Button
              className={styles.codeBtn}
              disabled={disableGetPhoneCode}
              onClick={this.onGetPhoneCode}
            >
              {`获取验证码${disableGetPhoneCode ? '(' + countTime + 's)' : ''}`}
            </Button>
          </div>
        </div>
        {/* <div className={styles.buttom} defaultChecked={false}>
          <input type="checkbox" ref={input => this.agreeInput = input} onClick={e=>console.log(e)}/>
          <label />
          <span>
            同意
            <a href="">《精天协议...》</a>
          </span>
        </div> */}
        <AgreeItem data-seed="logId" onChange={e => this.setState({agree: e.target.checked})}>
            同意 <a href="http://www.niushengniu.cn/#/layout/cmsDetail?tabName=main&activeTab=4&targetIndex=3">精天用户协议</a>
          </AgreeItem>
        <Button className={styles.but} onClick={this.onLogin} disabled={!this.state.agree}>
          登录/注册
        </Button>
      </div>
    );
  }
}

export default Login;
